<template>
  <a-upload
    v-model:file-list="fileList"
    name="avatar"
    list-type="picture-card"
    class="avatar-uploader"
    :show-upload-list="false"
    :customRequest="uploadImage"
    :before-upload="beforeUpload"
  >
    <img
      v-if="imageUrl"
      :src="imageUrl"
      alt="avatar"
      style="height: 250px; position: relative; z-index: 1"
    />
    <div v-else>
      <loading-outlined v-if="loading"></loading-outlined>
      <plus-outlined v-else></plus-outlined>
      <div class="ant-upload-text">Upload</div>
    </div>
  </a-upload>
</template>
<script>
  import { PlusOutlined, LoadingOutlined } from '@ant-design/icons-vue'
  import { message } from 'ant-design-vue'
  import { ref, onMounted } from 'vue'
  import { upload } from '@/api/file.js'
  //   function getBase64(img, callback) {
  //     const reader = new FileReader()
  //     reader.addEventListener('load', () => callback(reader.result))
  //     reader.readAsDataURL(img)
  //   }

  export default {
    components: {
      LoadingOutlined,
      PlusOutlined,
    },

    setup() {
      const fileList = ref([])
      const loading = ref(false)
      const imageUrl = ref('')
      const cover = ref('')
      const data = ref({
        file: '',
      })
      onMounted(() => {
        imageUrl.value = null
        console.log('mounted', imageUrl.value)
      })
      const handleChange = (info) => {
        console.log(info)
        if (info.file.status === 'uploading') {
          loading.value = true
          return
        }
        if (info.file.status === 'done') {
          loading.value = false
        }
        if (info.file.status === 'error') {
          loading.value = false
          message.error('upload error')
        }
      }

      const beforeUpload = (file) => {
        const isJpgOrPng =
          file.type === 'image/jpeg' || file.type === 'image/png'

        if (!isJpgOrPng) {
          message.error('You can only upload JPG file!')
        }

        const isLt2M = file.size / 1024 / 1024 < 2

        if (!isLt2M) {
          message.error('Image must smaller than 2MB!')
        }

        return isJpgOrPng && isLt2M
      }
      const uploadImage = (file) => {
        const formData = new FormData()
        formData.append('file', file.file)
        upload(formData).then(function (res) {
          cover.value = res.data.data
          imageUrl.value =
            'http://localhost:8099/myblog/upload/' + res.data.data
        })
      }
      return {
        fileList,
        loading,
        imageUrl,
        data,
        cover,
        handleChange,
        beforeUpload,
        uploadImage,
      }
    },
  }
</script>
<style>
  .avatar-uploader > .ant-upload {
    width: 128px;
    height: 128px;
  }
  .ant-upload-select-picture-card i {
    font-size: 32px;
    color: #999;
  }

  .ant-upload-select-picture-card .ant-upload-text {
    margin-top: 8px;
    color: #666;
  }
</style>
